<template>
  <div class="app-container">
    <el-form label-width="100px" width="200">
        <el-form-item label="账号">
          <el-input v-model="admin.adminAccount"/>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="admin.adminName"/>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="admin.adminAge"/>
        </el-form-item>
        <el-form-item label="性别">
          <!-- <el-input v-model="admin.adminSex"/> -->
          <el-select v-model="admin.currSexVal" placeholder="请选择">
            <el-option
              v-for="item in admin.adminSex"
              :key="item.key"
              :label="item.val"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="角色">
          <el-input v-model="admin.adminRole"/>
        </el-form-item> -->
        <el-form-item label="角色">
          <el-select v-model="admin.currRoleVal" placeholder="请选择">
            <el-option
              v-for="item in admin.adminRole"
              :key="item.key"
              :label="item.val"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="admin.adminPhone"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateAdminInfo()">保存</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import admin from '../../api/admin.js';
const roleEnum = {
  1:'管理员',
  2:'超级管理员'
}
export default {
  name:'AdminEdit',
  data(){
    return {
      admin:{
        adminAccount:this.$props.adminAccount,
        adminName:this.$props.adminName,
        adminAge:this.$props.adminAge,
        adminSex:[
          {
            key:1,
            val:'男'
          },
          {
            key:2,
            val:'女'
          }
        ],
        adminRole:[
          {
            key:1,
            val:'管理员'
          },
          {
            key:2,
            val:'超级管理员'
          }
        ],
        //当前选中的角色
        currRoleVal:this.$props.adminRole,
        //当前选中的性别
        currSexVal:this.$props.adminSex,
        adminPhone:this.$props.adminPhone,
        id:this.$props.id,
        status:this.$props.status
      }
    }
  },
  //多个参数时不要忘了配置props属性
  props:['id', 'adminAccount', 'adminName', 'adminPhone', 'adminRole', 'adminSex', 'adminAge'],
  methods:{
    updateAdminInfo(){
      console.log('编辑的数据admin：', this.admin)
      let adminDto = {
        id:this.admin.id,
        adminAccount:this.admin.adminAccount,
        adminName:this.admin.adminName,
        adminAge:this.admin.adminAge,
        currAdminSex:this.admin.currSexVal,
        currAdminRole:this.admin.currRoleVal,
        adminPhone:this.admin.adminPhone
      }
      console.log('待更新的数据admin：', this.admin)
      admin.updateAdmin(adminDto).then(
        response => {
          console.log('管理员更新响应数据：', response)
          let resData = response.data.data
          let resCode = response.data.code
          let resMsg = response.data.message
          if(resCode == '200' && resData){
            //提示
            this.$message({
              type: 'success',
              message: '编辑成功!'
            })
            //跳转列表页面，使用路由跳转方式实现
            this.$router.push({path:'/admin_list'})
          } else {
            //异常提示
            this.$message({
                type: 'error',
                message: resMsg
            })
          }
        },
        error => {
          console.error('管理员更新异常信息：', error)
        }
      )
    }
  },
  beforeMount(){
    console.log('管理员路由：', this.$route)
    console.log('管理员编辑原始数据：', this.$props)
  }
}
</script>

<style scoped>
  .el-input{
    width: 223px;
  }
</style>